<template>
  <el-form ref="doctor" :model="doctor" label-width="100px">
    <el-form-item label="用户头像" class="avatar-label">
      <el-upload
        class="avatar-uploader"
        :action="hostUrl + '/file/avatar/single'"
        accept="image/jpeg,image/gif,image/png"
        :show-file-list="false"
        :on-error="uploadError"
        :on-success="avatarUploadSuccess"
        :before-upload="avatarUploadCheck">
        <img v-if="doctor.avatarImg" :src="doctor.avatarImg" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="用户名" class="width-300">
      {{doctor.username}}
    </el-form-item>
    <el-form-item label="旧密码" class="width-300">
      <el-input type="password" v-model="doctor.oldPassword" placeholder="请输入旧密码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="新密码" class="width-300">
      <el-input type="password" v-model="doctor.password" placeholder="请输入密码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="确认新密码" class="width-300">
      <el-input type="password" v-model="doctor.repassword" placeholder="请再次输入密码" size="small"></el-input>
    </el-form-item>
    <el-form-item label="医生姓名" class="width-500">
      {{doctor.name}}
    </el-form-item>
    <el-form-item label="级别" class="width-500">
      {{doctor.level}}
    </el-form-item>
    <el-form-item label="所属医院">
      {{doctor.hospital}}
    </el-form-item>
    <el-form-item label="所属科室" class="width-500">      
      <template v-for="(value, key) in doctor.department">
        {{ key ? ' / ' : '' }}{{value}}        
      </template>       
    </el-form-item>
    <el-form-item label="擅长动物" class="width-500">
      <template v-for="(value, key) in doctor.goodAtAnimals">
        {{ key ? ' / ' : '' }}{{value}}
      </template>
    </el-form-item>
    <el-form-item label="擅长疾病" class="width-500">
      <template v-for="(value, key) in doctor.goodAtDisease">
        {{ key ? ' / ' : '' }}{{value}}
      </template>

      
    </el-form-item>
    <el-form-item label="总佣金" class="width-500">
      {{commission}} 元
    </el-form-item>
    <el-form-item label="未提现佣金" class="width-500">
      {{noCommission}} 元
    </el-form-item>
    <el-form-item label="已结算佣金" class="width-500">
      {{hasCommission}} 元
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="postSubmit" size="small">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      doctor: {
        id: 0,
        avatarImg: "",
        username: "",
        oldPassword: "",
        password: "",
        repassword: "",
        name: "",
        level: "",
        hospital: "",
        department: [],
        goodAtAnimals: [],
        goodAtDisease: [],
        practiceFileList: [],
        idCardFileList: [],
        contractFileList: [],
        status: false,
        commission: 0.0,
        balance: 0.0
      },
      commission: 0.0,
      noCommission: 0.0,
      hasCommission: 0.0,
      hostUrl: global.HOSTURL
    };
  },
  mounted() {
    this.doctor.id = this.$store.state.doctorInfo.id;
    this.doctor.avatarImg = this.$store.state.doctorInfo.avatarImg;
    this.doctor.username = this.$store.state.doctorInfo.username;
    this.doctor.name = this.$store.state.doctorInfo.name;
    this.doctor.level = this.$store.state.doctorInfo.level;
    this.doctor.hospital = this.$store.state.doctorInfo.hospital;
    this.doctor.department = this.$store.state.doctorInfo.department;
    this.doctor.goodAtAnimals = this.$store.state.doctorInfo.goodAtAnimals;
    this.doctor.goodAtDisease = this.$store.state.doctorInfo.goodAtDisease;
    this.doctor.practiceFileList = this.$store.state.doctorInfo.practiceFileList;
    this.doctor.idCardFileList = this.$store.state.doctorInfo.idCardFileList;
    this.doctor.contractFileList = this.$store.state.doctorInfo.contractFileList;
    this.doctor.status = this.$store.state.doctorInfo.status;
    this.doctor.salesmanId = this.$store.state.doctorInfo.salesmanId;
    this.commission = this.$store.state.commission;
    this.noCommission = this.$store.state.noCommission;
    this.hasCommission = this.$store.state.hasCommission;

    this.getCommissionData();
  },
  methods: {
    getCommissionData() {
      let id = this.$store.state.doctorInfo.id;

      this.axios.get("/doctor/" + id + "/commission").then(response => {
        if (response.data.code == 200) {
          this.commission = response.data.data.commission;
          this.noCommission = response.data.data.noCommission;
          this.hasCommission = response.data.data.hasCommission;
        }
      });
    },
    avatarUploadSuccess(res, file) {
      if (res.code === 200) {
        if (this.doctor.avatarImg != "") {
          this.axios
            .post("/file/delete", {
              url: this.doctor.avatarImg
            })
            .then(response => {});
        }

        this.doctor.avatarImg = res.data.url;
      }
    },
    avatarUploadCheck(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    uploadError(err, file, fileList) {
      this.$message.error("图片上传失败，请稍后重试!");
    },
    postSubmit() {
      if (this.doctor.password != "") {
        if (this.doctor.oldPassword == "") {
          this.$message.error("旧密码不能为空!");
          return;
        } else {
          if (this.doctor.password != this.doctor.repassword) {
            this.$message.error("新密码两次输入不一致!");
            return;
          }
        }
      }

      this.axios
        .patch("/doctor/personal/update", {
          id: this.doctor.id,
          avatarImg: this.doctor.avatarImg,
          oldPassword: this.doctor.oldPassword,
          password: this.doctor.password,
          repassword: this.doctor.repassword
        })
        .then(response => {
          if (response.data.code == 200) {
            this.$message({
              message: response.data.msg,
              type: "success"
            });
            return;
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            return;
          }
        });
    },
    showRecharge() {
      this.getBalanceData();
      this.getRechargeListData();
      this.dialogRechargeVisible = true;
    },
    getRechargeListData() {
      let id = this.doctor.id;
      this.axios.get("/recharge/shop/" + id + "/list").then(response => {
        if (response.data.code == 200) {
          this.rechargeList = response.data.data;
        } else {
          this.$message({
            message: response.data.msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>
